<template>
	<div class="tabel_Background" style="margin-left: 0%;">
		<div class="tabel_Background-wra">
			<div id="title">
				<span class="title-text">{{ title }}</span>
			</div>
			<div class="container" ref="usage_ref" style="width: 100%;height: 80%;"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "MtableLeft",
		data() {
			return {
				chartInstance: null,
				allData: null
			};
		},
		mounted() {
			this.initChart();
			this.getData();
		},
		methods: {
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.usage_ref);
			},
			getData() {
				//服务器的数据请求位置

				// this.allData = ret
				this.updateChart();
			},
			updateChart() {
				const option = {
					tooltip: {
						trigger: "axis"
					},
					grid: {
						top: "23%", // 等价于 y: '16%'
						left: "4%",
						right: "4%",
						bottom: "0%",
						containLabel: true
					},
					xAxis: {
						type: "category",
						axisTick: {
							show: false
						},
						axisLine: {
							
							lineStyle: {
								// 设置x轴颜色
								color: "#07DBFF"
							}
						},
						axisLable:{
							margin:14,
						},
						boundaryGap: false,
						data: [
							"2021/3/1",
							"2021/3/2",
							"2021/3/3",
							"2021/3/4",
							"2021/3/5",
							"2021/3/6",
							"2021/3/7",
							"2021/3/8",
							"2021/3/9",
							"2021/3/10",
							"2021/3/11",
							"2021/3/12",
							"2021/3/13",
							"2021/3/14",
							"2021/3/15",
							"2021/3/16",
							"2021/3/17",
							"2021/3/18",
							"2021/3/19",
							"2021/3/20",
							"2021/3/21",
							"2021/3/22",
							"2021/3/23",
							"2021/3/24",
							"2021/3/25",
							"2021/3/26",
							"2021/3/27",
							"2021/3/28",
							"2021/3/29",
							"2021/3/30",
							"2021/3/31",
							"2021/4/1",
							"2021/4/2",
							"2021/4/3",
							"2021/4/4",
							"2021/4/5",
							"2021/4/6",
							"2021/4/7",
							"2021/4/8",
							"2021/4/9",
							"2021/4/10",
							"2021/4/11",
							"2021/4/12",
							"2021/4/13",
							"2021/4/14",
							"2021/4/15",
							"2021/4/16",
							"2021/4/17",
							"2021/4/18",
							"2021/4/19",
							"2021/4/20",
							"2021/4/21",
							"2021/4/22",
							"2021/4/23",
							"2021/4/24",
							"2021/4/25",
							"2021/4/26",
							"2021/4/27",
							"2021/4/28",
							"2021/4/29",
							"2021/4/30"
						]
					},
					yAxis: {
						name: "单位：队",
						type: "value",
						axisTick: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#07DBFF"
							}
						},
						min: 0, // 设置y轴刻度的最小值
						max: 14
					},
					legend: {
						data: ["队伍数量"],
						right: "5%",
						textStyle: {
							color: "#ffffff"
						}
					},
					dataZoom: [{
							type: "inside",
							start: 0,
							end: 20
						},
						{
							height: 5,
							bottom: '15%',
							start: 0,
							end: 20
						}
					],
					series: [{
						name: "队伍数量",
						data: [
							4,
							5,
							6,
							7,
							6,
							6,
							8,
							9,
							9,
							14,
							3,
							2,
							7,
							3,
							14,
							8,
							6,
							4,
							11,
							4,
							8,
							10,
							14,
							13,
							12,
							3,
							5,
							6,
							2,
							3,
							6,
							14,
							5,
							6,
							7,
							6,
							6,
							8,
							9,
							9,
							14,
							3,
							2,
							7,
							3,
							4,
							8,
							6,
							14,
							11,
							4,
							8,
							10,
							2,
							13,
							12,
							3,
							5,
							6,
							2,
							3
						],
						type: "line",
						symbolSize: 7,
						symbol: "circle",
						itemStyle: {
							borderWidth: 1,
							color: "#07DAFF",
							borderColor: "#07DBFF", // 拐点边框颜色
							lineStyle: {
								width: 2,
								type: "solid"
							}
						},
						emphasis: {
							// 鼠标经过时：
							itemStyle: {
								color: "#07060C",
								borderColor: "#FFFFFF",
								borderWidth: 2
							}
						},
						areaStyle: {
							// 颜色自上而下渐变
							color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									// 1代表上面
									offset: 0.5,
									color: "#044065EF"
								},
								{
									// 1代表上面
									offset: 1,
									color: "#04406554"
								}
							]),
							opacity: 1 // 填充区域透明度
						}
					}]
				};
				this.chartInstance.setOption(option);
			}
		},
		props: {
			title: String
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.container {
		width: 100%; 
		height: 100%; 
	}

	.tabel_Background {
		width: 54%; 
		min-width: 3rem;
		height: 100%; 
		box-sizing: border-box;
		margin-right: 1%;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		background-image: url("../../assets/bg2.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	#title {
		width: 40%;
		height: 13%;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 3%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}
</style>
